import React from 'react'

export const themes = {
  light: {
    foreground: '#ffffff',
    background: '#444',
  },
  dark: {
    foreground: '#000000',
    background: '#eeeeee',
  },
};


const ThemeContext = React.createContext(themes.light)


class FancyButton extends React.Component {

  render() {
    return (
      <button onClick={this.props.onFocus} style={{backgroundColor: this.props.theme.background}}>{this.props.children}</button>
    )
  }
}

export default React.forwardRef((props, ref)=>(
  <ThemeContext.Consumer>
    {theme =>(
      <FancyButton {...props} theme={theme} ref={ref}/>
    )}
  </ThemeContext.Consumer>
))